<template>
  <div>
    <topicback :topic="topicName"></topicback>
    <div class="menuitem">
      <router-link v-for="(oneItem, index) of menuitem" :key="index" :to="oneItem.path">
        <span class="item"><img :src="oneItem.pic" width="20" height="20"></span>
        <p class="item-name">{{oneItem.name}}</p>
        <img class="carry-out" src="../assets/picture/carry-out.png" width="20" height="20">
      </router-link>
    </div>
  </div>
</template>

<script>
  import recharge from '../assets/picture/recharge.png'
  import aboutUs from '../assets/picture/about-us.png'

  import topicback from '../components/topic-back.vue'

  export default {
    name: 'menu',
    components: {
      topicback
    },
    data () {
      return {
        topicName: '菜单',
        menuitem: [
          {name: '充值', path: '/recharge', pic: recharge},
          {name: '关于我们', path: '/about-us', pic: aboutUs}
        ]
      }
    },
    created () {
      document.body.style.backgroundColor = '#f4f5f9'
    },
    beforeDestroy () {
      document.body.style.backgroundColor = 'none'
    }
  }
</script>

<style scope lang="scss">
  html{
    height: 100%;
  }
  .menuitem{
    a{
      height: 56px;
      width: 100%;
      background: #ffffff;
      display: block;
      position: relative;

      span.item{
        float: left;
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        line-height: 53px;
        margin: 0 15px;
        img{
          vertical-align: middle;
        }
      }
      p.item-name{
        float: left;
        line-height: 56px;
        font-size: 15px;
        color: #1e1e1b;
      }
      img.carry-out{
        position: absolute;
        right: 15px;
        top: 50%;
        margin-top: -10px;
        display: inherit;
      }
    }
  }
</style>
